<template>
  <div class="exhibitors">
    <!-- 顶部静态图片 -->
    <div class="static-banner" v-if="carouselData.length > 0">
      <div class="banner-item">
        <img :src="carouselData[0].image" alt="banner" class="banner-img">
        <div class="banner-overlay">
          <div class="container">
            <div class="banner-content">
              <h1 class="banner-title">{{ carouselData[0].title }}</h1>
              <p class="banner-subtitle" v-if="carouselData[0].subtitle">{{ carouselData[0].subtitle }}</p>
              <p class="banner-description" v-if="carouselData[0].description">{{ carouselData[0].description }}</p>
              <el-button 
                v-if="carouselData[0].buttonText" 
                type="primary" 
                size="large"
                @click="handleCarouselAction(carouselData[0].action)"
              >
                {{ carouselData[0].buttonText }}
              </el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 页面标题（当没有轮播图时显示） -->
    <div class="page-header" v-else>
      <div class="container">
        <h1 class="page-title">{{ pageTitle || '展商中心' }}</h1>
        <p class="page-subtitle">{{ pageSubtitle || '为参展商提供全方位的服务和支持' }}</p>
      </div>
    </div>

    <!-- 导航菜单 -->
    <div class="nav-menu">
      <div class="container">
        <nav class="exhibitor-nav">
          <a @click="setActiveTab('why-exhibit')" 
             :class="['nav-item', { active: activeTab === 'why-exhibit' }]" 
             v-if="whyExhibit.length > 0">为何参展</a>
          <a @click="setActiveTab('who-exhibits')" 
             :class="['nav-item', { active: activeTab === 'who-exhibits' }]" 
             v-if="whoExhibits.length > 0">谁来观展</a>
          <a @click="setActiveTab('exhibit-registration')" 
             :class="['nav-item', { active: activeTab === 'exhibit-registration' }]">参展报名</a>
          <a @click="setActiveTab('exhibitor-system')" 
             :class="['nav-item', { active: activeTab === 'exhibitor-system' }]">展商系统</a>
          <a @click="setActiveTab('exhibitor-services')" 
             :class="['nav-item', { active: activeTab === 'exhibitor-services' }]" 
             v-if="exhibitorServices.length > 0">展商服务</a>
          <a @click="setActiveTab('exhibitor-reviews')" 
             :class="['nav-item', { active: activeTab === 'exhibitor-reviews' }]" 
             v-if="exhibitorReviews.length > 0">展商评价</a>
        </nav>
      </div>
    </div>

    <div class="container">
      <!-- 为何参展 -->
      <section id="why-exhibit" class="exhibitor-section" v-if="whyExhibit.length > 0 && activeTab === 'why-exhibit'">
        <h2 class="section-title">{{ sectionTitleWhyExhibit || '为何参展' }}</h2>
        <div class="why-exhibit">
          <div class="reason-item" v-for="reason in whyExhibit" :key="reason.id">
            <div class="reason-image-section" v-if="reason.image">
              <img :src="reason.image" :alt="reason.title" class="reason-image">
            </div>
            <div v-html="reason.description" class="reason-description"></div>
          </div>
        </div>
      </section>

      <!-- 谁来观展 -->
      <section id="who-exhibits" class="exhibitor-section" v-if="whoExhibits.length > 0 && activeTab === 'who-exhibits'">
        <h2 class="section-title">{{ sectionTitleWhoExhibits || '谁来观展' }}</h2>
        <div class="who-exhibits">
          <div class="exhibitor-item" v-for="exhibitor in whoExhibits" :key="exhibitor.id">
            <div class="exhibitor-image-section" v-if="exhibitor.image">
              <img :src="exhibitor.image" :alt="exhibitor.title" class="exhibitor-image">
            </div>
            <div class="exhibitor-content">
              <h3>{{ exhibitor.title }}</h3>
              <div v-html="exhibitor.description" class="exhibitor-description"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 参展报名 -->
      <section id="exhibit-registration" class="exhibitor-section" v-if="activeTab === 'exhibit-registration'">
        <h2 class="section-title">参展报名</h2>
        <div class="registration-form-flow">
          <div class="form-steps">
            <div class="step-item">
              <div class="step-number">1</div>
              <div class="step-content">
                <h3>公司信息</h3>
                <p>填写公司基本信息</p>
              </div>
            </div>
            <div class="step-arrow">→</div>
            <div class="step-item">
              <div class="step-number">2</div>
              <div class="step-content">
                <h3>联系信息</h3>
                <p>填写联系人和联系方式</p>
              </div>
            </div>
            <div class="step-arrow">→</div>
            <div class="step-item">
              <div class="step-number">3</div>
              <div class="step-content">
                <h3>展品范围</h3>
                <p>选择参展产品类别</p>
              </div>
            </div>
          </div>
          
          <div class="product-categories">
            <h3>展品范围选择</h3>
            <div class="category-list">
              <div class="category-item">
                <el-icon><Setting /></el-icon>
                <span>机器人核心零部件（含成熟和创新产品）</span>
              </div>
              <div class="category-item">
                <el-icon><Cpu /></el-icon>
                <span>大脑相关（人工智能算法及其他）</span>
              </div>
              <div class="category-item">
                <el-icon><Tools /></el-icon>
                <span>整机研发、设计、系统集成</span>
              </div>
              <div class="category-item">
                <el-icon><Tools /></el-icon>
                <span>机器人检测、维修和保养、测试验证等</span>
              </div>
              <div class="category-item">
                <el-icon><Setting /></el-icon>
                <span>机器人生产设备、流水线、代工厂等</span>
              </div>
              <div class="category-item">
                <el-icon><More /></el-icon>
                <span>其他，请说明</span>
              </div>
            </div>
          </div>
          
          <div class="registration-actions">
            <el-button type="primary" size="large" @click="$router.push('/exhibit-registration')">
              <el-icon><Edit /></el-icon>
              立即报名参展
            </el-button>
          </div>
        </div>
      </section>

      <!-- 展商系统 -->
      <section id="exhibitor-system" class="exhibitor-section" v-if="exhibitorSystem.length > 0 && activeTab === 'exhibitor-system'">
        <h2 class="section-title">{{ sectionTitleExhibitorSystem || '展商系统' }}</h2>
        <div class="system-features">
          <div class="feature-item" v-for="feature in exhibitorSystem" :key="feature.id">
            <div class="feature-image-section" v-if="feature.image">
              <img :src="feature.image" :alt="feature.title" class="feature-image">
            </div>
            <div v-html="feature.description" class="feature-description"></div>
          </div>
        </div>
      </section>

      <!-- 展商服务 -->
      <section id="exhibitor-services" class="exhibitor-section" v-if="exhibitorServices.length > 0 && activeTab === 'exhibitor-services'">
        <h2 class="section-title">{{ sectionTitleExhibitorServices || '展商服务' }}</h2>
        <div class="services-content">
          <div class="service-item" v-for="service in exhibitorServices" :key="service.id">
            <div class="service-image-section" v-if="service.image">
              <img :src="service.image" :alt="service.title" class="service-image">
            </div>
            <div class="service-content">
              <h3>{{ service.title }}</h3>
              <div v-html="service.description" class="service-description"></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 展商评语 -->
      <section id="exhibitor-reviews" class="exhibitor-section" v-if="exhibitorReviews.length > 0 && activeTab === 'exhibitor-reviews'">
        <h2 class="section-title">{{ sectionTitleExhibitorReviews || '展商评语' }}</h2>
        <div class="reviews-content">
          <div class="reviews-gallery">
            <div class="review-item" v-for="review in exhibitorReviews" :key="review.id">
              <!-- 图片区域 - 在上方 -->
              <div class="review-image-section" v-if="review.image || review.avatar">
                <img :src="review.image || review.avatar" :alt="review.name || '展商'" class="review-image">
              </div>
              
              <!-- 评语内容区域 - 在下方 -->
              <div class="review-content-section">
                <div class="review-header">
                  <div class="reviewer-details">
                    <h4 v-if="review.name">{{ review.name }}</h4>
                    <span v-if="review.company">{{ review.company }}</span>
                    <span v-if="review.position">{{ review.position }}</span>
                  </div>
                </div>
                <div class="review-content">
                  <div v-html="review.content" class="review-description"></div>
                </div>
                <div class="review-footer">
                  <span class="review-date">{{ review.date }}</span>
                  <span class="review-exhibition">{{ review.exhibition }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
      
    </div>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { 
  Edit, 
  Setting, 
  Tools, 
  Cpu,
  More
} from '@element-plus/icons-vue'
import { subpageApi } from '@/api/user'

export default {
  name: 'Exhibitors',
  components: {
    Cpu,
    Tools,
    More,
    Edit,
    Setting
  },
  setup() {
    const router = useRouter()
    
    // 当前激活的tab
    const activeTab = ref('why-exhibit')
    
    // 轮播图数据
    const carouselData = ref([])
    
    // 设置激活的tab
    const setActiveTab = (tabName) => {
      activeTab.value = tabName
    }
    
    // 处理轮播图按钮点击
    const handleCarouselAction = (action) => {
      if (action) {
        console.log('轮播图按钮点击:', action)
      }
    }
    
    // 加载轮播图数据
    const loadCarouselData = async () => {
      try {
        const response = await subpageApi.getContentByType('carousel_exhibitors')
        if (response && response.code === '200' && response.data) {
          carouselData.value = response.data
            .filter(item => item.status === 'active')
            .map(item => {
              const content = typeof item.content === 'string' ? JSON.parse(item.content) : item.content
              return {
                id: item.id,
                title: item.title,
                subtitle: item.subtitle || '',
                description: content.description || '',
                image: item.imageUrl || content.image || '',
                buttonText: content.buttonText || '',
                action: content.action || ''
              }
            })
            .sort((a, b) => a.sort - b.sort)
        }
      } catch (error) {
        console.error('加载轮播图数据失败:', error)
      }
    }
    
    // 页面标题
    const pageTitle = ref('')
    const pageSubtitle = ref('')

    // 6个核心区域的数据
    const whyExhibit = ref([])
    const whoExhibits = ref([])
    const exhibitRegistration = ref([])
    const exhibitorSystem = ref([])
    const exhibitorServices = ref([])
    const exhibitorReviews = ref([])

    // 区块标题
    const sectionTitleWhyExhibit = ref('')
    const sectionTitleWhoExhibits = ref('')
    const sectionTitleExhibitRegistration = ref('')
    const sectionTitleExhibitorSystem = ref('')
    const sectionTitleExhibitorServices = ref('')
    const sectionTitleExhibitorReviews = ref('')

    // 解析内容字段的辅助函数
    const parseContent = (content) => {
      if (!content) return { content: '', subtitle: '', backgroundImage: '', videoUrl: '', isFeatured: false }
      
      try {
        // 尝试解析为JSON
        const parsed = JSON.parse(content)
        return {
          content: parsed.content || '',
          subtitle: parsed.subtitle || '',
          backgroundImage: parsed.backgroundImage || '',
          videoUrl: parsed.videoUrl || '',
          isFeatured: parsed.isFeatured || false
        }
      } catch (e) {
        // 如果不是JSON，直接返回原始内容
        return {
          content: content,
          subtitle: '',
          backgroundImage: '',
          videoUrl: '',
          isFeatured: false
        }
      }
    }

    // 加载展商页面数据
    const loadExhibitorData = async () => {
      try {
        // 定义6个核心区域
        const sections = [
          { key: 'why-exhibit', ref: whyExhibit, titleRef: sectionTitleWhyExhibit },
          { key: 'who-exhibit', ref: whoExhibits, titleRef: sectionTitleWhoExhibits },
          { key: 'exhibit-registration', ref: exhibitRegistration, titleRef: sectionTitleExhibitRegistration },
          { key: 'exhibitor-system', ref: exhibitorSystem, titleRef: sectionTitleExhibitorSystem },
          { key: 'service', ref: exhibitorServices, titleRef: sectionTitleExhibitorServices },
          { key: 'review', ref: exhibitorReviews, titleRef: sectionTitleExhibitorReviews }
        ]

        // 加载每个区域的数据
        for (const section of sections) {
          try {
            const response = await subpageApi.getSubpageList('exhibitors', section.key)
            if (response && response.code === '200' && response.data && response.data.length > 0) {
              section.ref.value = response.data.map((item, index) => {
                const parsed = parseContent(item.content)
                return {
                  id: item.id || index + 1,
                  title: item.title || parsed.subtitle || '',
                  description: parsed.content || item.description || '',
                  icon: item.icon || getDefaultIcon(section.key, index),
                  image: item.imageUrl || item.image || parsed.backgroundImage || '',
                  videoUrl: parsed.videoUrl || '',
                  isFeatured: parsed.isFeatured || false
                }
              })
              
              // 设置区域标题
              if (response.data.length > 0) {
                section.titleRef.value = response.data[0].title || section.titleRef.value
              }
            } else {
              section.ref.value = []
            }
          } catch (error) {
            console.error(`加载${section.key}数据失败:`, error)
            section.ref.value = []
          }
        }

        // 特殊处理展商评语数据
        if (exhibitorReviews.value.length > 0) {
          exhibitorReviews.value = exhibitorReviews.value.map(review => {
            // 处理富文本内容
            let content = review.description || ''
            if (typeof content === 'string' && !content.includes('<')) {
              // 如果是纯文本，保持原样
              content = content
            }
            
            return {
              ...review,
              name: review.name || '',
              company: review.company || '',
              position: review.position || '',
              avatar: review.avatar || '',
              image: review.image || '',
              date: review.date || new Date().toISOString().split('T')[0],
              exhibition: review.exhibition || 'FAIR plus 2025',
              content: content
            }
          })
        }

      } catch (error) {
        console.error('加载展商页面数据失败:', error)
        // 设置空数组
        whyExhibit.value = []
        whoExhibits.value = []
        exhibitRegistration.value = []
        exhibitorSystem.value = []
        exhibitorServices.value = []
        exhibitorReviews.value = []
      }
    }

    // 获取默认图标
    const getDefaultIcon = (sectionKey, index) => {
      const iconMap = {
        'why-exhibit': ['Trophy', 'User', 'Setting', 'Connection', 'Star', 'Trophy'],
        'who-exhibits': ['User', 'OfficeBuilding', 'Shop', 'House'],
        'exhibit-registration': ['Edit', 'Document', 'Check', 'Calendar', 'Star', 'Trophy'],
        'exhibitor-system': ['Setting', 'Tools', 'Grid', 'DataAnalysis', 'Picture', 'Promotion'],
        'exhibitor-services': ['Van', 'Location', 'Phone', 'Message', 'Star', 'Trophy'],
        'exhibitor-reviews': ['Star', 'Trophy', 'Connection', 'User', 'Star', 'Trophy']
      }
      const icons = iconMap[sectionKey] || ['Trophy', 'User', 'Setting', 'Connection', 'Star', 'Trophy']
      return icons[index % icons.length]
    }

    // 获取随机头像
    const getRandomAvatar = () => {
      const avatars = [
        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop&crop=face',
        'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=100&h=100&fit=crop&crop=face',
        'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop&crop=face',
        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100&h=100&fit=crop&crop=face',
        'https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=100&h=100&fit=crop&crop=face',
        'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=100&h=100&fit=crop&crop=face'
      ]
      return avatars[Math.floor(Math.random() * avatars.length)]
    }

    // 页面加载时获取数据
    onMounted(() => {
      loadExhibitorData()
      loadCarouselData()
    })


    return {
      activeTab,
      setActiveTab,
      carouselData,
      handleCarouselAction,
      pageTitle,
      pageSubtitle,
      whyExhibit,
      whoExhibits,
      exhibitRegistration,
      exhibitorSystem,
      exhibitorServices,
      exhibitorReviews,
      sectionTitleWhyExhibit,
      sectionTitleWhoExhibits,
      sectionTitleExhibitRegistration,
      sectionTitleExhibitorSystem,
      sectionTitleExhibitorServices,
      sectionTitleExhibitorReviews
    }
  }
}
</script>

<style scoped>
.exhibitors {
  padding-top: 70px;
  min-height: 100vh;
  background: #f8f9fa;
}

/* 顶部静态图片样式 */
.static-banner { margin-top: 0; }
.banner-item { position: relative; height: 400px; overflow: hidden; }
.banner-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); padding-top: 130px; }
.banner-content { text-align: left; color: #fff; max-width: 100%; }
.banner-title { font-size: 48px; font-weight: bold; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); }
.banner-subtitle { font-size: 24px; margin-bottom: 15px; opacity: 0.9; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }
.banner-description { font-size: 18px; margin-bottom: 30px; opacity: 0.8; line-height: 1.6; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

.page-header {
  background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%);
  color: white;
  padding: 80px 0;
  text-align: center;
}

.page-title {
  font-size: 48px;
  margin-bottom: 20px;
}

.page-subtitle {
  font-size: 18px;
  opacity: 0.9;
}

.nav-menu {
  background: #f8f9fa;
  padding: 20px 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.exhibitor-nav {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.nav-item {
  text-decoration: none;
  color: #333;
  font-size: 1.1rem;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid #eee;
}

.nav-item:hover {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.nav-item.active {
  background-color: #667eea;
  color: white;
  border-color: #667eea;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.exhibitor-section {
  background: white;
  margin: 30px 0;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 30px;
  position: relative;
  padding-left: 15px;
}

.section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 2px;
}

/* 为何参展样式 */
.why-exhibit {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.reason-item {
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s ease;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.reason-item:hover {
  transform: translateY(-5px);
}

.reason-image-section {
  width: 300px;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  margin-right: 30px;
  border-radius: 8px;
}

.reason-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #f8f9fa;
  transition: transform 0.3s ease;
}

.reason-image:hover {
  transform: scale(1.05);
}

.reason-description {
  flex: 1;
  color: #666;
  line-height: 1.6;
  text-align: left;
  padding: 0;
  font-size: 16px;
}

.reason-description p {
  margin-bottom: 12px;
}

.reason-description ul, .reason-description ol {
  margin: 12px 0;
  padding-left: 20px;
}

.reason-description li {
  margin-bottom: 6px;
}

.reason-description h1, .reason-description h2, .reason-description h3, 
.reason-description h4, .reason-description h5, .reason-description h6 {
  margin: 16px 0 8px 0;
  color: #333;
  font-weight: 600;
}

.reason-description img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}

/* 富文本内图片限制（展商中心所有富文本块） */
.reason-description :deep(img),
.exhibitor-description :deep(img),
.feature-description :deep(img),
.service-description :deep(img),
.review-description :deep(img) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 谁来观展样式 */
.who-exhibits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.exhibitor-item {
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s ease;
  overflow: hidden;
}

.exhibitor-item:hover {
  transform: translateY(-5px);
}

.exhibitor-image-section {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.exhibitor-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #f8f9fa;
}

.exhibitor-content {
  padding: 20px;
}

.exhibitor-content h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.exhibitor-description {
  color: #666;
  line-height: 1.6;
  text-align: left;
}

.exhibitor-description p {
  margin-bottom: 12px;
}

.exhibitor-description ul, .exhibitor-description ol {
  margin: 12px 0;
  padding-left: 20px;
}

.exhibitor-description li {
  margin-bottom: 6px;
}

.exhibitor-description h1, .exhibitor-description h2, .exhibitor-description h3, 
.exhibitor-description h4, .exhibitor-description h5, .exhibitor-description h6 {
  margin: 16px 0 8px 0;
  color: #333;
  font-weight: 600;
}

.exhibitor-description img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}

/* 参展流程样式 */
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.step-item:hover {
  transform: translateY(-5px);
}

.step-number {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  flex-shrink: 0;
}

.step-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.step-content p {
  color: #666;
  line-height: 1.5;
}

/* 参展报名样式 */
.registration-content {
  max-width: 800px;
  margin: 0 auto;
}

.registration-info {
  background: #f8f9fa;
  padding: 40px;
  border-radius: 12px;
  text-align: center;
}

.registration-info h3 {
  font-size: 1.8rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
}

.registration-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 30px;
  text-align: left;
}

.registration-description p {
  margin-bottom: 12px;
}

.registration-description ul, .registration-description ol {
  margin: 12px 0;
  padding-left: 20px;
}

.registration-description li {
  margin-bottom: 6px;
}

.registration-description h1, .registration-description h2, .registration-description h3, 
.registration-description h4, .registration-description h5, .registration-description h6 {
  margin: 16px 0 8px 0;
  color: #333;
  font-weight: 600;
}

.registration-description img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}

.registration-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* 展品范围样式 */
.product-scope {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.scope-item {
  text-align: center;
  padding: 30px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.scope-item:hover {
  transform: translateY(-5px);
}

.scope-icon {
  font-size: 3rem;
  color: #667eea;
  margin-bottom: 20px;
}

.scope-item h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.scope-item p {
  color: #666;
  line-height: 1.5;
}

/* 展商系统样式 */
.system-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.feature-item {
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s ease;
  overflow: hidden;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-image-section {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.feature-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #f8f9fa;
}

.feature-description {
  color: #666;
  line-height: 1.6;
  text-align: left;
  padding: 20px;
}

.feature-description p {
  margin-bottom: 12px;
}

.feature-description ul, .feature-description ol {
  margin: 12px 0;
  padding-left: 20px;
}

.feature-description li {
  margin-bottom: 6px;
}

.feature-description h1, .feature-description h2, .feature-description h3, 
.feature-description h4, .feature-description h5, .feature-description h6 {
  margin: 16px 0 8px 0;
  color: #333;
  font-weight: 600;
}

.feature-description img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}

/* 展商须知样式 */
.exhibitor-notice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.notice-item {
  padding: 30px 20px;
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s ease;
}

.notice-item:hover {
  transform: translateY(-5px);
}

.notice-item h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
}

.notice-item p {
  color: #666;
  line-height: 1.5;
}



/* 展商服务样式 */
.services-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.service-item {
  background: #f8f9fa;
  border-radius: 12px;
  transition: transform 0.3s;
  overflow: hidden;
}

.service-item:hover {
  transform: translateY(-5px);
}

.service-image-section {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.service-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #f8f9fa;
}

.service-content {
  padding: 20px;
}

.service-content h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #2c3e50;
  text-align: center;
}

.service-description {
  color: #666;
  line-height: 1.6;
}

.service-description p {
  margin-bottom: 12px;
}

.service-description ul, .service-description ol {
  margin: 12px 0;
  padding-left: 20px;
}

.service-description li {
  margin-bottom: 6px;
}

.service-description h1, .service-description h2, .service-description h3, 
.service-description h4, .service-description h5, .service-description h6 {
  margin: 16px 0 8px 0;
  color: #333;
  font-weight: 600;
}

.service-description img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}

.layout-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.layout-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
}

.layout-details h4 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #2c3e50;
}

.layout-details p {
  color: #666;
  margin-bottom: 20px;
  line-height: 1.6;
}

.layout-details ul {
  margin-bottom: 20px;
  padding-left: 20px;
}

.layout-details li {
  color: #666;
  margin-bottom: 8px;
  line-height: 1.5;
}

.hotels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.hotel-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
}

.hotel-item:hover {
  transform: translateY(-5px);
}

.hotel-image {
  height: 200px;
  overflow: hidden;
}

.hotel-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotel-info {
  padding: 20px;
}

.hotel-info h4 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #2c3e50;
}

.hotel-info p {
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.hotel-details {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  font-size: 0.9rem;
  color: #999;
}

/* 展商评语样式 */
.reviews-content {
  max-width: 1000px;
  margin: 0 auto;
}

.reviews-gallery {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.review-item {
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s;
  overflow: hidden;
}

.review-image-section {
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.review-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-content-section {
  padding: 25px;
}

.review-item:hover {
  transform: translateY(-5px);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.reviewer-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.reviewer-details h4 {
  font-size: 1.2rem;
  margin-bottom: 5px;
  color: #2c3e50;
}

.reviewer-details span {
  display: block;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 2px;
}

.review-description {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.review-description p {
  margin-bottom: 12px;
}

.review-description ul, .review-description ol {
  margin: 12px 0;
  padding-left: 20px;
}

.review-description li {
  margin-bottom: 6px;
}

.review-description h1, .review-description h2, .review-description h3, 
.review-description h4, .review-description h5, .review-description h6 {
  margin: 16px 0 8px 0;
  color: #333;
  font-weight: 600;
}

.review-description img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
}

.review-footer {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: #999;
}

.reviews-summary {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.reviews-summary h3 {
  font-size: 1.5rem;
  margin-bottom: 30px;
  color: #2c3e50;
  text-align: center;
}

.summary-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

.summary-stats .stat-item {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.summary-stats .stat-number {
  display: block;
  font-size: 2rem;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 5px;
}

.summary-stats .stat-label {
  font-size: 0.9rem;
  color: #666;
}

.summary-chart h4 {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: #2c3e50;
}

.rating-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rating-bar {
  display: flex;
  align-items: center;
  gap: 15px;
}

.rating-label {
  width: 40px;
  font-size: 0.9rem;
  color: #666;
}

.bar-container {
  flex: 1;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: #409eff;
  transition: width 0.3s;
}

.rating-count {
  width: 40px;
  text-align: right;
  font-size: 0.9rem;
  color: #666;
}

/* 相关活动样式 */
.related-activities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.activity-item {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.activity-item:hover {
  transform: translateY(-5px);
}

.activity-image {
  height: 200px;
  overflow: hidden;
}

.activity-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.activity-content {
  padding: 20px;
}

.activity-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
}

.activity-content p {
  color: #666;
  line-height: 1.5;
  margin-bottom: 10px;
}

.activity-date {
  color: #999;
  font-size: 0.9rem;
}

/* 参展报名表单流程样式 */
.registration-form-flow {
  max-width: 1000px;
  margin: 0 auto;
}

.form-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.form-steps .step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  min-width: 150px;
  transition: transform 0.3s ease;
}

.form-steps .step-item:hover {
  transform: translateY(-5px);
}

.form-steps .step-number {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.form-steps .step-content h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
}

.form-steps .step-content p {
  color: #666;
  font-size: 0.9rem;
  line-height: 1.4;
}

.step-arrow {
  font-size: 1.5rem;
  color: #667eea;
  font-weight: bold;
  margin: 0 10px;
}

.product-categories {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 30px;
  margin-bottom: 30px;
}

.product-categories h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.category-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 15px;
}

.category-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  background: white;
  border-radius: 8px;
  border: 2px solid #e9ecef;
  transition: all 0.3s ease;
}

.category-item:hover {
  border-color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.category-item .el-icon {
  font-size: 1.2rem;
  color: #667eea;
  flex-shrink: 0;
}

.category-item span {
  color: #333;
  font-weight: 500;
  line-height: 1.4;
}

.registration-actions {
  text-align: center;
  margin-top: 30px;
}

.registration-actions .el-button {
  padding: 15px 40px;
  font-size: 1.1rem;
  font-weight: 600;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-title {
    font-size: 2rem;
  }
  
  .exhibitor-section {
    padding: 20px;
  }
  
  .why-exhibit,
  .who-exhibits,
  .system-features,
  .services-content {
    grid-template-columns: 1fr;
  }
  
  .reason-item {
    flex-direction: column;
    text-align: center;
  }
  
  .reason-image-section {
    width: 100%;
    height: 250px;
    margin-right: 0;
    margin-bottom: 20px;
  }
  
  .reason-description {
    text-align: center;
  }
  
  .registration-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .form-steps {
    flex-direction: column;
    gap: 15px;
  }
  
  .step-arrow {
    transform: rotate(90deg);
    margin: 10px 0;
  }
  
  .category-list {
    grid-template-columns: 1fr;
  }
  
  .form-steps .step-item {
    min-width: auto;
    width: 100%;
  }
}
</style> 